<template>
     <div :class="prefixCls" class="lg:flex">
        <a :class="`${prefixCls}__a`"  v-for="item in groupItems" :href="item.link">
            <Card :title="item.title">
                <span class="flex">
                    <Icon :icon="item.icon" :color="item.color" size="30" />
                    <span class="text-lg ml-4">{{ item.title }}</span>
                </span>
                <div class="flex mt-6 h-10 text-secondary">{{ item.desc }}</div>
                <div class="flex justify-between text-secondary">
                    <span>{{ item.group }}</span>
                    <span>{{ item.date }}</span>
                 </div>
            </Card>
        </a>
     </div>
</template>
<script lang="ts" setup>
import { Card } from 'ant-design-vue';
import { Icon } from '/@/components/Icon';
import { groupItems } from './data';


// 
const prefixCls = 'app_list';

</script>

<style lang="less" scoped>
        .app_list{
            margin-top: 300px;
            &__a{
                margin-left: 10px;
            }
        }

        .ant-card {
        width: 300px;
		border-radius: 12px;
		box-shadow: 0px 20px 27px rgba(0, 0, 0, 0.05);
	}
</style>